<template>
	<uv-popup class="m-navbar_drawer" overlayOpacity='0' ref="refInfo" mode="right" closeIconPos="top-left" :closeable="true">
		<view class="app-container" :style="{'--user-drawer-width': drawerWidth+'px'}">
			<view class="title">{{title}}</view>
			<view v-if="isType === 1" class="change_user">
				<uv-form ref="refInfoForm" :model="info"  class="user-from">
					<uv-form-item>
						<uv-input v-model="info.nickName" border="bottom" maxlength='10'>
							<template v-slot:prefix>
								<uv-text text="昵&nbsp;&nbsp;&nbsp;&nbsp;称" margin="0 3px 0 0" type="tips"></uv-text>
							</template>
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<view v-else-if="isType === 3" class="change_user">
				<uv-form ref="refInfoForm" :model="info"  class="user-from">
					<uv-form-item>
						<uv-input v-model="info.email" border="bottom">
							<template v-slot:prefix>
								<uv-text text="邮&nbsp;&nbsp;&nbsp;&nbsp;箱" margin="0 3px 0 0" type="tips"></uv-text>
							</template>
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<view v-else class="change_user">				
				<uv-form ref="refInfoForm" :model="info"  class="user-from">
					<uv-form-item class="">
						<uv-input v-model="password" password border="bottom">
							<template v-slot:prefix>
								<uv-text text="旧密码" margin="0 3px 0 0" type="tips"></uv-text>
							</template>							
						</uv-input>
					</uv-form-item>
					<uv-form-item class="">
						<uv-input v-model="newPassword" :type="isEyePass?'text':'password'" border="bottom">
							<template v-slot:prefix>
								<uv-text text="新密码" margin="0 3px 0 0" type="tips"></uv-text>
							</template>	
							<template v-slot:suffix>
								<image v-if="!isEyePass" class="form-item-icon-suffix" @click="changeIsEyePass" src="@/static/images/login/icon_hidden.png"></image>
								<image v-else class="form-item-icon-suffix" @click="changeIsEyePass" src="@/static/images/login/icon_eye.png"></image>
							</template>
						</uv-input>
					</uv-form-item>
					<uv-form-item  class="">
						<uv-input v-model="ensurPassword" :type="isEyeEnsure?'text':'password'" border="bottom">
							<template v-slot:prefix>
								<uv-text text="确认密码" margin="0 3px 0 0" type="tips"></uv-text>
							</template>
							<template v-slot:suffix>
								<image v-if="!isEyeEnsure" class="form-item-icon-suffix" @click="changeIsEyeEnsure" src="@/static/images/login/icon_hidden.png"></image>
								<image v-else class="form-item-icon-suffix" @click="changeIsEyeEnsure" src="@/static/images/login/icon_eye.png"></image>
							</template>
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<uv-button class="submit_btn" :loading="loading" loadingText='保存中...' shape="circle" type="primary" @click="submit">保存</uv-button>
		</view>		
	</uv-popup>
</template>

<script setup name="editUserinfo">
	import { computed, ref, inject, getCurrentInstance } from 'vue';
	
	import { userStore } from '@/stores/user'
	
	import { validateChar, clearLoginInfo } from '@/utils';
	
	const { ctx } = getCurrentInstance()
	const { api } = inject('global');
	
	const refInfo = ref(null)
	const refInfoForm = ref(null)
	
	const isType = ref(2);
	const loading = ref(false)
	const title = ref('修改信息')
	const isEyePass = ref(false)
	const isEyeEnsure = ref(false)
	const password = ref(null)
	const newPassword = ref(null)
	const ensurPassword = ref(null)
	
	let info = ref({})
	
	const drawerWidth = computed(() => {
		return uni.upx2px(584)
	})
	
	const reset = () => {
		isType.value = 2
		
		const { userId, userInfo } = userStore()
		info.value = {
			...userInfo
		}
	}
	const open = (type) => {
		reset()
		isType.value = type;
		switch (type){
			case 1:
				title.value = '修改昵称'
				break;
			case 3:
				title.value = '修改邮箱'
				break;
			default:
				title.value = '修改密码'
				break;
		}
		
		refInfo.value.open();
	}
	
	const changeIsEyePass = () => {
		isEyePass.value = !isEyePass.value
	}
	
	const changeIsEyeEnsure = () => {
		isEyeEnsure.value = !isEyeEnsure.value
	}
	
	const submit = () => {
		switch (isType.value){
			case 2:
				const newPass = newPassword.value
				const ensurePass = ensurPassword.value
				const regexp = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,20}$/;
				if ( ctx.$uv.test.empty(password.value) ) {
					uni.showToast({
						icon: 'none',
						title: '旧密码不能为空'
					});
					return
				} else if ( ctx.$uv.test.empty(newPass) ) {
					uni.showToast({
						icon: 'none',
						title: '新密码不能为空'
					});
					return
				} else if ( ctx.$uv.test.empty(ensurePass) ) {
					uni.showToast({
						icon: 'none',
						title: '确认密码不能为空'
					});
					return
				} else if (!regexp.test(newPass)) {
					uni.showToast({
						icon: 'none',
						title: '密码须包含大小写字母、数字、特殊字符至少三种且长度不少于8位'
					});
					return 
				} else if (!validateChar(newPass)){
					uni.showToast({
						icon: 'none',
						title: '密码不能包含连续3位及以上相同字母或数字,不能包含3个及以上键盘连续字符)'
					});
					return
				} else if (newPass !== ensurePass) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return
				}
				api.user.changePassword(password.value, newPass).then((res) => {
					if (res.code ==200) {
						uni.showToast({
							title: '修改成功',
							icon: "none"
						})
						setTimeout(()=> {
							clearLoginInfo()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
				break;
			default:
				let data = {...info.value}
				if (loading.value) return
				if (1 === isType.value) {
					const nickName = info.value.nickName
					if ( ctx.$uv.test.empty(nickName) ) {
						uni.showToast({
							icon: 'none',
							title: '请填写昵称'
						})
						return
					}
					data.nickName = ctx.$uv.trim(info.value.nickName)
				}
				if (3 === isType.value) {
					const email = info.value.email
					if ( ctx.$uv.test.empty(email) ) {
						uni.showToast({
							icon: 'none',
							title: '请填写邮箱'
						})
						return
					}
					if (!ctx.$uv.test.email(email)) {
						uni.showToast({
							icon: 'none',
							title: '邮箱格式不正确'
						})
						return
					}
					data.email = info.value.email
				}
				loading.value = true
				
				api.user.updateInfo(data).then(() => {
					const { getInfo } = userStore()
					getInfo().then(() => {
						uni.showToast({
							icon: 'none',
							title: '修改成功',
						})
						setTimeout(() => {
							refInfo.value.close()
						}, 1600)
					})
					loading.value = false
				})
				break;
		}
	}
	
	defineExpose({
		open
	})
</script>

<style scoped lang="scss">
	.app-container {
		height: 100%;
		width: var(--user-drawer-width);
		padding-top:  var(--status-bar-height);
		position: relative;		
		.title {
			text-align: center;
			height: 44px;
			line-height: 44px;
		}
		.submit_btn {
			position: absolute;
			left: 50%;
			bottom: 8%;
			width: 80%;
			transform: translate(-50%, 0%);
		}
	}
	.change_user {
		width: 88%;
		height: 80%;
		margin: 0 auto;
	}
	.user-from {
		height: 100%;
	}
	.form-item-icon-suffix {
		width: 16px;
		height: 12px;
	}
</style>